<template>
  <el-dialog v-model="isShowLoginDialog" width="370px" title="账号登陆" draggable align-center class="loginDialog">
    <el-form :model="user" label-width="30px" :rules="rule" ref="formRef">
      <el-form-item prop="accountNumber">
        <template #label>
          <el-icon :size="18"><UserFilled /></el-icon>
        </template>
        <el-input v-model="user.accountNumber"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <template #label>
          <el-icon :size="18"><Briefcase /></el-icon>
        </template>
        <el-input v-model="user.password" show-password></el-input>
      </el-form-item>
    </el-form>
    <section>
      <span type="text" @click="isShowDrawer = true">忘记密码</span>
    </section>

    <button @click="login">
      <svg viewBox="25 25 50 50" v-if="isClickBtn">
        <circle cx="50" cy="50" r="20"></circle>
      </svg>
      <span v-else>登录</span>
    </button>

    <article id="tips">
      <div>温馨提示:</div>
      教职工账号为TCH+工号，学生为STU+学号，初始密码为
      <span>身份证后六位</span>。 例如: TCH1234 或 STU1234。
    </article>
  </el-dialog>

  <!-- 修改密码的抽屉 -->
  <forget-password :is-show="isShowDrawer" @on-closed="onDrawerClosed"></forget-password>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { User } from '../../type';
import { ElMessage } from 'element-plus';
import ForgetPassword from './ForgetPassword.vue';
import { useRuleUtils } from '../../utils/validate';

const formRef = ref();
const ruleUtils = useRuleUtils();
const isShowDrawer = ref<boolean>(false);
const isShowLoginDialog = ref<boolean>();
const user = reactive<User>({
  accountNumber: '',
  password: '',
});

const isClickBtn = ref<boolean>(false);
defineExpose({
  isClickBtn,
  isShowLoginDialog,
});

const onDrawerClosed = () => {
  isShowDrawer.value = false;
};

const emit = defineEmits(['onLoginBtnClick']);
const login = () => {
  isClickBtn.value = !isClickBtn.value;
  if (isClickBtn.value) {
    const formEl = formRef.value;
    if (!formEl) return;
    formEl.validate(async (valid: any) => {
      if (valid) {
        emit('onLoginBtnClick', user);
      }
    });
  }
};

const validateUserName = (rule: any, value: string, callback: any) => {
  // console.log(value, value.substring(0, 3));

  if (!value || value === '') {
    callback(new Error('这是必填项'));
  } else if (value.substring(0, 3) !== 'STU' && value.substring(0, 3) !== 'TCH') {
    callback(new Error('必须以STU或TCH开头'));
  } else {
    callback();
  }
};

const rule = {
  accountNumber: [{ validator: validateUserName, trigger: 'blur' }],
  password: [{ validator: ruleUtils.password, trigger: 'blur' }],
};
</script>

<style lang="scss">
.loginDialog {
  background-color: #fff !important;
}
</style>
<style lang="scss" scoped>
section {
  text-align: end;
  height: 30px;
  span {
    color: #606266;
    padding: 6px;
    cursor: pointer;
  }
}

//输入框前的图标水平垂直居中
:deep(.el-form-item__label) {
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep(.el-input__wrapper) {
  background-color: #fff !important;
}

:deep(.el-form-item__label),
:deep(.el-input__inner) {
  color: black !important;
}

button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  border: none;
  color: whitesmoke;
  margin-top: 10px;
  border-radius: 4px;
  letter-spacing: 8px;
  font-size: 16px;
  transition: all 0.5s ease;
  background-image: linear-gradient(30deg, #0061ce, #00b5fb);

  svg {
    width: 20px;
    transform-origin: center;
    animation: rotate 2s linear infinite;
  }

  circle {
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
  }

  @keyframes rotate {
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes dash {
    0% {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
    }
    50% {
      stroke-dasharray: 90, 200;
      stroke-dashoffset: -35px;
    }
    100% {
      stroke-dashoffset: -125px;
    }
  }
}

button:hover {
  cursor: pointer;
  transition: all 0.3s ease;
  transform: translateY(-2px);
  box-shadow: 0 8px 36px 0px #0061ce;
  // box-shadow: 0 4px 20px 12px rgba(0, 0, 0, 0.1);
}

article {
  color: black;
  div {
    margin: 20px 0 10px 0;
    font-size: 18px;
    font-weight: bold;
  }
  span {
    font-weight: bold;
  }
}
</style>
